<template>
  <div id="body">
    <div id="main">
      <div style="text-align: center; font-size: 28px; margin-bottom: 30px">
        <span>小蓝书</span>
      </div>

      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="loginForm.username"
            name="QQ号"
            label="QQ号"
            placeholder="QQ号"
            :rules="[{ required: true, message: '请填写QQ号' }]"
            :error-message="nameError"
            style="margin-bottom: 10px"
          />
          <van-field
            v-model="loginForm.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            :error-message="passwordError"
            style="margin-bottom: 10px"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            @click="login"
          >
            立即登录
          </van-button>
        </div>
        <div style="text-align: center">
          <a @click="toRegister">没有账号？马上注册</a>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Login } from "../../util/login.js";
export default {
  setup() {
    return {};
  },
  data() {
    return {
      nameError: "",
      passwordError: "",
      op: "",
      loginForm: [
        {
          username: "",
          password: "",
        },
      ],
    };
  },
  methods: {
    toRegister() {
      this.$router.replace("/register");
    },
    login() {
      const userNameArr = [];
      const passWordArr = [];
      if (this.loginForm.username === undefined) {
        this.nameError = "QQ号不能为空!";
        return;
      }
      if (this.loginForm.password === undefined) {
        this.passwordError = "密码不能为空!";
        return;
      }
      var ret = Login(this.loginForm);
      ret.then((result) => {
        this.op = result;
        if (this.op === -1) {
          this.nameError = "用户名不存在!";
          return;
        }
        if (this.op === 0) {
          this.passwordError = "密码错误！";
        } else {
          localStorage.setItem("qq", this.loginForm.username);
          this.$router.push("/home");
        }
      });
    },
  },
};
</script>

<style scoped>
#main {
  margin-top: 100px;
}
#body {
  width: 100%;
  height: 100%;
  /* background:rgba(247, 245, 245, 0) url('../assets/user.jpg') center no-repeat fixed; */
}
</style>